<!--
 * @Author: panghu chenjh@datamargin.com
 * @Date: 2024-03-27 08:52:34
 * @LastEditors: panghu chenjh@datamargin.com
 * @LastEditTime: 2024-03-27 20:17:43
 * @FilePath: \vue3-vite-mall-admin-system\src\views\home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <el-header>
        <!-- 头部区域 -->
        <Header />
      </el-header>
      <el-container>
        <el-aside :width="$store.state.isCollapse ? '64px' : '200px'">
          <!-- 左侧菜单 -->
          <Menu />
        </el-aside>
        <el-main>
          <!-- 导航菜单 -->
          <TagMenu />
          <!-- 主体内容 -->
          <router-view v-slot="{ Component }">
            <!-- v-slot="{Component}" 拿到点击之后的动态组件 -->
            <!-- 页面缓存 -->
            <!-- 如何实现动态组件的调用 使用component -->
            <keep-alive :max="8">
              <component :is="Component"></component>
            </keep-alive>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import Header from '@/components/header.vue'
import Menu from '@/components/menu.vue'
import TagMenu from '@/components/tagMenu.vue'
</script>

<style lang='less' scoped>
.el-header {
  background: #1AA094;
}

.el-main {
  background: #F2F4F5;
  height: 100%;
}

.el-aside {
  height: 100%;
  background: #32363f;
}
</style>
